<template>
  <div class="home-container">
    <van-nav-bar title="黑马头条" fixed :border="false"  />
    <!-- 导入，注册， 并使用ArticleInfo组件 -->
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      :success-text="tips"
    
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ArticleInfo
          v-for="item in artList"
          :key="item.id"
          :title="item.title"
          :author="item.aut_name"
          :cmt-count="item.comm_count"
          :cover="item.cover"
        ></ArticleInfo>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleInfo from "@/components/ArticleInfo.vue";
// 按需导入请求文章列表函数
import { getArticalList } from "@/api/articalApi.js";
export default {
  name: "Home",
  data() {
    return {
      // 页码值
      page: 1,
      // 每页显示多少条数据
      limit: 10,
      // 文章列表数组
      artList: [],
      // 是否正在加载下一页数据， 如果loading 为true，则不会反复触发load事件
      // 每当下一页数据请求回来之后，要把loading 改为false
      loading: true,
      // 所有数据是否加载完毕，如果没有更多数据了，一定要把finshed 改成true
      finished: false,
      // 默认值为false，是否在下拉刷新
      refreshing: false,
      // 下拉刷新提示信息
      tips: "刷新成功",
    };
  },
  components: {
    ArticleInfo,
  },
  created() {
    this.initArticleList();
  },
  methods: {
    // 封装请求文章列表数据的方法
    async initArticleList(isRefresh) {
      const { data: res } = await getArticalList(this.page, this.limit);
      // console.log(res);
      if (isRefresh) {
        // 证明是下拉刷新，新数据在前，旧数据在后
        this.artList = [...res, ...this.artList];
        this.refreshing = false;
      } else {
        this.artList = [...this.artList, ...res];
        this.loading = false;
      }

      if (res.length === 0) {
        this.finished = true;
        this.tips = "没有更多了";
         this.page = 7
      }
    },
    // 只要onLoad 触发了求请求下一页数据
    onLoad() {
      console.log("触发了 load 事件");
      // 让页码值加一
      this.page++;
      this.initArticleList();
    },
    onRefresh() {
      this.page++;
      this.initArticleList(true);
    },
  },
};
</script>

<style <style lang="less" scoped>
.home-container {
  padding: 46px 0 50px;
}
// .van-nav-bar {
//   background: #007bff;
// }
// /deep/.van-nav-bar__title {
//   color: #fff;
// }
</style>